<template>
    <div class="system-user-container">
        <el-form :inline="true" ref="form" class="system-search-form" :model="searchForm">
            <el-form-item>
                <el-cascader
                    class="go-out"
                    v-model="searchForm.mechanism"
                    @change="changeMechanism"
                    :options="mechanismList"
                    :show-all-levels="false"
                    :props="{ checkStrictly: true, emitPath: false }"
                    filterable
                    size="small">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-cascader
                    class="go-out"
                    v-model="searchForm.department"
                    :show-all-levels="false"
                    :options="departmentList"
                    :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                    filterable
                    clearable
                    size="small">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-input type="text" v-model="searchForm.name" @keyup.enter.native="toFirstPage()" placeholder="用户姓名" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="sub-btn" type="primary" size="small" @click="toFirstPage()">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-box">
            <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" v-auth="{code: 300002000001}" @click="showAddDialog">新增</el-button>
            <el-table
                ref="tableData"
                :data="tableData"
                tooltip-effect="light"
                border
                :max-height="tableHeight"
                @sort-change="sortChange"
                class="data-table">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="姓名"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="organizationName"
                    label="所属机构"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="account"
                    align="center"
                    label="账号"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="age"
                    align="center"
                    label="年龄"
                    width="80"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="post"
                    label="职位"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="职称"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="科室"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.departmenName | getDepartmentText}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="role"
                    label="角色"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="查阅权限"
                    align="center"
                    width="80"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.access | getAuth}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="phone"
                    align="center"
                    label="联系电话"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="createdName"
                    align="center"
                    label="创建人"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    align="center"
                    width="160"
                    sortable="custom"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{parseTime(new Date(scope.row.createdTime).getTime())}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="启/停"
                    align="center"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" size="small" :disabled="!showBtnAuth(300002000002)" @change="toChangeState(scope.$index, scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="80"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" size="small" v-auth="{code: 300002000002}" @click="tableEdit(scope.row)">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="getData"/>
        </div>
        <el-dialog
            :title="isAdd ? '新增用户' : '编辑用户'"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="closeDialog"
            center
            width="40%">
            <el-form v-if="dialogVisible" :inline="true" ref="dialogForm" class="dialog-form" :rules="editFormRules" :model="editForm" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-input type="text" maxlength="20" v-model="editForm.name" placeholder="用户姓名" size="small"></el-input>
                </el-form-item>
                <el-form-item label="所属机构" prop="mechanism">
                    <el-cascader
                        class="go-out"
                        v-model="editForm.mechanism"
                        @change="changeMechanismDialog"
                        :options="mechanismList"
                        :show-all-levels="false"
                        :props="{ checkStrictly: true, emitPath: false }"
                        filterable
                        size="small">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="editForm.role" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in selectOtions.roles"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室" prop="department">
                    <el-cascader
                        class="go-out"
                        v-model="editForm.department"
                        :show-all-levels="false"
                        collapse-tags
                        :options="dialogDepartmentList"
                        :props="{ checkStrictly: false, emitPath: false, value: 'id', label: 'name', multiple: true }"
                        clearable
                        filterable
                        size="small">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input type="text" maxlength="15" v-model="editForm.phone" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="手机号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input type="text" v-model="editForm.age" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="年龄" size="small">
                        <template slot="append">岁</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="职称" prop="jobTitle">
                    <el-select v-model="editForm.jobTitle" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in  selectOtions.jobTitle"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-select v-model="editForm.position" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in  selectOtions.position"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input type="text" maxlength="100" v-model="editForm.account" placeholder="请输入账号" size="small"></el-input>
                    <!--防止浏览器自动填充-->
                    <!--<el-input type="text" class="fixed-input-hidden"></el-input>-->
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <!--防止浏览器自动填充-->
                    <!--<el-input type="password" class="fixed-input-hidden"></el-input>-->
                    <el-input type="password" v-model="editForm.password" placeholder="默认密码 123456" show-password size="small"></el-input>
                </el-form-item>
                <el-form-item label="查阅权限" class="radio-box" prop="checkAuth">
                    <el-radio-group v-model="editForm.checkAuth">
                        <el-radio :label="1">本人</el-radio>
                        <el-radio :label="2">本科</el-radio>
                        <el-radio :label="3">本院</el-radio>
                        <el-radio :label="4">全院</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="启/停" class="switch-box" prop="status">
                    <el-switch v-model="editForm.status"></el-switch>
                </el-form-item>
                <el-form-item label="关联信息" class="form-linked-tips">
                    <p class="text">（关联his数据服务，用于小助手数据存储）</p>
                </el-form-item>
                <el-form-item label="关联账号" prop="linkedAccount">
                    <el-input type="text" maxlength="100" v-model="editForm.linkedAccount" placeholder="请输入关联账号" size="small"></el-input>
                    <!--防止浏览器自动填充-->
                    <el-input type="text" class="fixed-input-hidden"></el-input>
                </el-form-item>
                <el-form-item label="关联密码" prop="linkedPassword">
                    <!--防止浏览器自动填充-->
                    <el-input type="password" maxlength="100" class="fixed-input-hidden"></el-input>
                    <el-input type="password" v-model="editForm.linkedPassword" placeholder="请输入关联密码" show-password size="small"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="submitEditForm('dialogForm')" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getUsersList, getSelectList, addUser, editUser, changeState, getRolesList} from '@/api/system/user'
    import {getSortString, showBtnAuth} from '@/utils/filters'
    import Pagination from '@/components/Pagination'

    export default {
        name: 'index',
        data () {
            return {
                // 搜索内容
                searchForm: {
                    mechanism: '',
                    department: '',
                    name: ''
                },
                // 机构列表
                mechanismList: [],
                // 科室列表
                departmentList: [],
                // 弹框科室列表
                dialogDepartmentList: [],
                // 表格数据
                tableData: [],
                // 数据总数
                total: 0,
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 10,
                // 表格高度
                tableHeight: 100,
                // 显示弹框
                dialogVisible: false,
                // 弹框表单
                editForm: {
                    // 姓名
                    name: '',
                    // 角色
                    role: '',
                    // 电话
                    phone: '',
                    // 年龄
                    age: '',
                    // 机构
                    mechanism: '',
                    // 科室
                    department: '',
                    // 职称
                    jobTitle: '',
                    // 职位
                    position: '',
                    // 账号
                    account: '',
                    // 密码
                    password: '',
                    // 查阅权限
                    checkAuth: 1,
                    // 启停状态
                    status: true,
                    // 关联账号
                    linkedAccount: '',
                    // 关联密码
                    linkedPassword: ''
                },
                // 角色、职称、职务 下拉框选项
                selectOtions: {
                    roles: [],
                    jobTitle: [],
                    position: []
                },
                // 是否是新增
                isAdd: true,
                // 排序方式
                orderBy: null,
                // 排序字段
                sortMap: {},
                editFormRules: {
                    name: [
                        { required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
                        { min: 2, message: '最小输入两位字符', trigger: ['blur', 'change'] }
                    ],
                    role: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '请填写手机号', trigger: ['blur', 'change'] }
                    ],
                    age: [
                        { required: true, message: '请填写年龄', trigger: ['blur', 'change'] }
                    ],
                    mechanism: [
                        { required: true, message: '请选择机构', trigger: 'change' }
                    ],
                    department: [
                        { required: true, message: '请选择科室', trigger: 'change' }
                    ],
                    jobTitle: [
                        { required: true, message: '请选择职称', trigger: 'change' }
                    ],
                    position: [
                        { required: true, message: '请选择职位', trigger: 'change' }
                    ],
                    account: [
                        { required: true, message: '请填写账号', trigger: ['blur', 'change'] },
                        { min: 3, message: '最小输入三位字符', trigger: ['blur', 'change'] }
                    ]
                },
                // 使用储存的数据，不去请求
                useStoreData: false,
                useStoreRoles: false,
                useStoreOption: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStoreData = this.$route.query.tags === 'tags'
            this.useStoreRoles = this.$route.query.tags === 'tags'
            this.useStoreOption = this.$route.query.tags === 'tags'
            let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
            this.tableHeight = height > 107 ? height : 107
            this.getMechanismList()
            this.initData()
            this.getData()
            this.getSelectOptions()
        },
        mounted () {
            window.onresize = () => {
                // 213=其他元素高度60+50+48+55 10=距离底部边距 78=分页组件高度 5=适应性调整
                let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
                this.tableHeight = height > 107 ? height : 107
            }
        },
        methods: {
            showBtnAuth,
            /**
             * 初始化页面参数
             */
            initData () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                if (JSON.stringify(query) !== '{}') {
                    this.searchForm.mechanism = query.orgId
                    if (query.orgId) this.changeMechanism(query.orgId)
                    this.searchForm.department = query.departmenId || ''
                    this.currentPage = query.index || 1
                    this.pageSize = query.pageSize || 10
                    this.searchForm.name = query.keyword || ''
                    this.orderBy = query.orderBy || null
                }
            },
            /**
             * 获取角色 列表
             * @param val 弹框中选择的机构
             * @param roleId 指定的角色id
             */
            getSelectRolesOptions (val, roleId) {
                let params = {
                    orgId: val || this.searchForm.mechanism
                }
                if (this.getSession(this.$route.name, 'getRolesList') && this.useStoreRoles) {
                    this.useStoreRoles = false
                    let res = this.getSession(this.$route.name, 'getRolesList')
                    if (res.code.toString() === '200') {
                        this.selectOtions.roles = res.data
                        if (roleId) {
                            this.editForm.role = roleId
                        }
                    }
                } else {
                    getRolesList(params).then(res => {
                        this.useStoreRoles = false
                        this.setSession(this.$route.name, {getRolesList: res})
                        if (res.code.toString() === '200') {
                            this.selectOtions.roles = res.data
                            if (roleId) {
                                this.editForm.role = roleId
                            }
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 获取角色 职称 职务 列表
             */
            getSelectOptions () {
                if (this.getSession(this.$route.name, 'getSelectList') && this.useStoreOption) {
                    this.useStoreOption = false
                    let res = this.getSession(this.$route.name, 'getSelectList')
                    if (res.code.toString() === '200') {
                        this.selectOtions.jobTitle = res.data.professorTitle
                        this.selectOtions.position = res.data.duty
                    }
                } else {
                    getSelectList().then(res => {
                        this.useStoreOption = false
                        this.setSession(this.$route.name, {getSelectList: res})
                        if (res.code.toString() === '200') {
                            this.selectOtions.jobTitle = res.data.professorTitle
                            this.selectOtions.position = res.data.duty
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 获取机构列表
             */
            getMechanismList () {
                let mechanismList = this.getLocalStorage('userInfo', 'mechanism')
                let parentList = []
                mechanismList.forEach(item => {
                    // 一级机构
                    if (!item.pid) {
                        parentList.push({
                            value: item.id,
                            label: item.name,
                            children: []
                        })
                        // 有一级机构的二级机构
                        mechanismList.forEach(it => {
                            if (it.pid === item.id) {
                                parentList[parentList.length - 1].children.push({
                                    value: it.id,
                                    label: it.name,
                                    children: null
                                })
                            }
                        })
                        if (!parentList[parentList.length - 1].children.length) {
                            parentList[parentList.length - 1].children = null
                        }
                    } else {
                        // 二级机构
                        let parent = mechanismList.filter(i => item.pid === i.id)
                        if (!parent.length) {
                            parentList.push({
                                value: item.id,
                                label: item.name,
                                children: null
                            })
                        }
                    }
                })
                this.mechanismList = parentList
                if (this.mechanismList.length) {
                    if (this.getLocalStorage('userMechanism', 'id') && this.hasMechanismId(this.getLocalStorage('userMechanism', 'id'))) {
                        this.searchForm.mechanism = this.getLocalStorage('userMechanism', 'id')
                    } else {
                        this.searchForm.mechanism = parentList[0].value
                    }
                }
                this.changeMechanism(this.searchForm.mechanism)
            },
            /**
             * 判断所属机构是否在组织机构中
             * @param id 所属机构id
             */
            hasMechanismId (id) {
                let res = this.mechanismList.filter(item => item.value === id)
                return res.length !== 0
            },
            /**
             * 修改机构
             */
            changeMechanism (val) {
                let mechanismList = this.getLocalStorage('userInfo', 'mechanism')
                let departmentList = []
                mechanismList.forEach(item => {
                    if (item.id === val) {
                        departmentList = item.organDep
                    }
                })
                this.departmentList = departmentList
                this.searchForm.department = ''
            },
            /**
             * 修改机构(弹框中)
             * @param val 机构id
             * @param roleId 指定的角色id
             */
            changeMechanismDialog (val, roleId) {
                this.getSelectRolesOptions(val, roleId)
                this.editForm.role = ''
                let mechanismList = this.getLocalStorage('userInfo', 'mechanism')
                let departmentList = []
                mechanismList.forEach(item => {
                    if (item.id === val) {
                        departmentList = item.organDep
                    }
                })
                this.dialogDepartmentList = departmentList
            },
            /**
             * 修改条件后从第一页开始
             */
            toFirstPage () {
                this.currentPage = 1
                this.getData()
            },
            /**
             * 获取表格数据
             * @param type 是否重置页码
             */
            getData (type) {
                this.getSelectRolesOptions()
                let params = {
                    orgId: this.searchForm.mechanism,
                    departmenId: this.searchForm.department,
                    index: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.searchForm.name,
                    orderBy: this.orderBy
                }
                this.setGetStore(this.$route.name, params)
                if (this.getSession(this.$route.name, 'getUsersList') && this.useStoreData) {
                    this.useStoreData = false
                    let res = this.getSession(this.$route.name, 'getUsersList')
                    if (res.code.toString() === '200') {
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                        this.total = res.data.total
                    }
                } else {
                    getUsersList(params).then(res => {
                        this.useStoreData = false
                        this.setSession(this.$route.name, {getUsersList: res})
                        if (res.code.toString() === '200') {
                            this.tableData = res.data.rows
                            this.sortMap = res.data.maps
                            this.total = res.data.total
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.orderBy = getSortString(colData, this.sortMap)
                this.tableData = []
                this.currentPage = 1
                this.getData()
            },
            /**
             * 启动停止
             * @param index 索引
             * @param row 行数据
             */
            toChangeState (index, row) {
                let text = ''
                let title = ''
                if (row.state) {
                    text = `您确定启用"${row.name}"用户吗?`
                    title = '启用用户'
                } else {
                    text = `您确定停用"${row.name}"用户吗?停用后将不能再被使用!`
                    title = '停用用户'
                }
                this.$confirm(text, title, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.changeIdState(row.id, row.state)
                }).catch(() => {
                    row.state = !row.state
                })
            },
            /**
             * 改变指定状态
             * @param id 数据id
             * @param state 状态
             */
            changeIdState (id, state) {
                let params = {
                    id: id,
                    state: state
                }
                changeState(params).then(res => {
                    if (res.code.toString() === '200') {
                        this.$message.success(state ? '启用成功' : '停用成功')
                    } else if (res.code.toString() === '404') {
                        this.$message.error('未找到该用户')
                    } else {
                        this.$message.error(res.message)
                    }
                    this.getData()
                })
            },
            /**
             * 编辑表格内容
             * @param row 行数据
             */
            tableEdit (row) {
                this.isAdd = false
                this.editForm = {
                    name: row.name,
                    role: row.roleId,
                    phone: row.phone,
                    age: row.age,
                    mechanism: row.organizationId,
                    department: this.getDepartmentId(row.departmenName),
                    jobTitle: row.titleId,
                    position: row.positionId,
                    account: row.account,
                    password: row.password,
                    checkAuth: row.access,
                    status: row.state,
                    linkedAccount: row.glAccout,
                    linkedPassword: row.glPassword,
                    id: row.id
                }
                this.changeMechanismDialog(row.organizationId, row.roleId)
                this.dialogVisible = true
            },
            /**
             * 获取科室id
             * @param data 数据源
             */
            getDepartmentId (data) {
                let arr = []
                data.forEach(item => {
                    arr.push(item.id)
                })
                return arr
            },
            /**
             * 关闭弹框
             */
            closeDialog () {
                this.editForm = {
                    name: '',
                    role: '',
                    phone: '',
                    age: '',
                    mechanism: '',
                    department: '',
                    jobTitle: '',
                    position: '',
                    account: '',
                    password: '',
                    checkAuth: 1,
                    status: true,
                    linkedAccount: '',
                    linkedPassword: ''
                }
                this.$refs['dialogForm'].resetFields()
                this.dialogVisible = false
            },
            /**
             * 点击新增打开弹窗
             */
            showAddDialog () {
                this.isAdd = true
                this.dialogVisible = true
            },
            /**
             * 提交编辑内容
             * @param formName 表单名
             */
            submitEditForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            name: this.editForm.name,
                            roleId: this.editForm.role,
                            phone: this.editForm.phone,
                            age: Number(this.editForm.age),
                            organizationId: this.editForm.mechanism,
                            departmenName: this.getParamsDep(this.editForm.department),
                            titleId: this.editForm.jobTitle,
                            positionId: this.editForm.position,
                            account: this.editForm.account,
                            password: this.editForm.password,
                            access: this.editForm.checkAuth,
                            state: this.editForm.status,
                            glAccout: this.editForm.linkedAccount,
                            glPassword: this.editForm.linkedPassword
                        }
                        if (this.isAdd) {
                            if (this.editForm.password === '') {
                                this.editForm.password = params.password = '123456'
                            }
                            addUser(params).then(res => {
                                if (res.code.toString() === '200') {
                                    this.$message.success('新增成功')
                                    this.closeDialog()
                                    this.getData()
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                        } else {
                            params.id = this.editForm.id
                            editUser(params).then(res => {
                                if (res.code.toString() === '200') {
                                    this.$message.success('保存成功')
                                    this.closeDialog()
                                    this.getData()
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                        }
                    } else {
                        return false
                    }
                })
            },
            /**
             * 组装科室id
             * @param data 科室数组
             */
            getParamsDep (data) {
                let obj = []
                data.forEach(item => {
                    obj.push({
                        id: item
                    })
                })
                return obj
            }
        },
        components: {
            Pagination
        },
        filters: {
            getDepartmentText (val) {
                let txt = ''
                val.forEach(item => {
                    txt += item.name + '、'
                })
                return txt.slice(0, txt.length - 1)
            },
            getAuth (val) {
                switch (val) {
                case 1:
                    return '本人'
                case 2:
                    return '本科'
                case 3:
                    return '本院'
                case 4:
                    return '全院'
                default:
                    return ''
                }
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style lang="scss" scoped>
    .system-user-container {
        .system-search-form {
            .el-form-item {
                margin-bottom: 0;
            }
        }
        .table-box {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            height: calc(100vh - 183px);
            .add-btn {
                margin-bottom: 10px;
            }
        }
        /deep/.el-dialog {
            width: 800px!important;
            .el-dialog__body {
                padding: 10px;
                .dialog-form {
                    width: 90%;
                    margin: 0 auto;
                    .el-form-item {
                        width: 44%;
                        .el-input {
                            width: 220px;
                        }
                    }
                    .radio-box {
                        width: 60%;
                    }
                    .switch-box {
                        width: 30%;
                    }
                    .form-linked-tips {
                        width: 100%;
                        .text {
                            margin: 0;
                            color: #ff8100;
                        }
                    }
                }
            }
            .el-dialog__footer {
                text-align: right;
            }
        }
    }
    /deep/.el-cascader__search-input {
        min-width: 20px;
    }
</style>
